<template>
  <div>
    <Row>
      <i-col span="24" class="operation_item y_query_right">
        <Input v-model.trim="tParam.userEmail" style="min-width: 180px;" placeholder="请输入邮箱" clearable class="y_condition"></Input>
        <Button type="primary" icon="md-search" @click="search()" class="y_condition">查询</Button>
        <Button type="primary" icon="md-add" @click="showEmailDialog()"  class="y_condition">发送AD邮件</Button>
      </i-col>
    </Row>

    <br/>
    <!--表格和分页-->
    <Table stripe border :context="this" :columns="tTable"
           @on-selection-change="selectedChanged"
           :data="tData.contactUserList" class="table_css" no-data-text="暂无数据">

    </Table>
    <br/>
    <div style="float: right;">
      <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[20,40,60,100]"
            show-sizer show-elevator/>
    </div>


    <!--发送邮件-->
    <Modal
      v-model="tStatus.sendEmailModal.isShow"
      title="发送邮件"
      :closable="false"
      :loading="tStatus.sendEmailModal.isLoading" >
        <Form ref="formValidate"  :label-width="80">
          <FormItem  label="邮件模板" >
            <Input v-model.trim="tParam.templateId" placeholder="请输入邮件模板"></Input>
          </FormItem>

        </Form>
      <div slot="footer">
        <Button  @click="tStatus.sendEmailModal.isShow=false">取消</Button>
        <Button :loading="tStatus.sendEmailModal.isLoading" type="primary" @click="sendEmail">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import tiyData from "./js/contactUserList/contact_user_data";
import {webList,sendAddEmail} from "./js/contactUserList/contact_user_fun";


export default {
  data() {
    return {
      page: tiyData.tPage,
      tParam: tiyData.tParam,
      tData: tiyData.tData,
      tTable:tiyData.tTable(this),
      tStatus:tiyData.tStatus,
      selected:tiyData.tParam.selected
    }
  },

  methods:{
    search() {
      webList(this, tiyData);
    },
    changePage(page) {
      tiyData.tPage.currentPage = page;
      webList(this, tiyData);
    },
    sizeChange(page) {
      tiyData.tPage.stepNumber = page;
      webList(this, tiyData);
    },

    showEmailDialog(){
      if(tiyData.tParam.selected.length==0){
        this.$Message.error("请选择联系人");
        return;
      }
      this.tStatus.sendEmailModal.isShow=true;
    },
    sendEmail(){
      sendAddEmail(this,tiyData);
    },
    selectedChanged(selected){
      tiyData.tParam.selected.splice(0);
      selected.forEach(function(item){
        tiyData.tParam.selected.push(item);
      })
    }

  }
}
</script>

<style lang="less" scoped>
@import  (once,optional)  "../css/base";

.list_value {
  font-size: 13px;
  color: @tiyTextDescColor;
  padding-right: 1rem;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}
</style>
